/*
 * @Author: your name
 * @Date: 2021-12-20 19:11:08
 * @LastEditTime: 2021-12-21 19:54:46
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day10 react\my-app\src\views\coll\coll.js
 */
import React, { Component } from 'react';

import Header from "../../component/Header"
import collScss from "./coll.module.scss"
import * as actions from "../../store/action"

import {connect} from "react-redux"
import {bindActionCreators} from "redux"
 
class coll extends Component {

    state={
        arr:["常吃","不吃","偶尔"],
        srr:["","常吃","不吃","偶尔"],
        activeIndex:0
    }

    changeIndex(index){
        // console.log(index);
        this.setState({
            activeIndex:index
        })
        this.props.change_Coll(index)
    }

    componentDidMount(){
        this.props.change_Coll(0)
    }

    render() { 
        let {arr,srr,activeIndex}=this.state
        let {list}=this.props
        // console.log(list);
        return (
            <div>
                <Header name="食物收藏" {...this.props}></Header>
                <ul className={collScss.uls}>
                    {
                        arr&&arr.map((item,index) => {
                            return <li key={index} onClick={this.changeIndex.bind(this,index)} style={{color:activeIndex===index?'red':''}}>{item}</li>
                        })
                    }
                </ul>
                <ol className={collScss.ols}>
                    {
                        list&&list.length?list.map((item,index)=>{
                            return <li key={index}>
                                <p>{item.name}</p>
                                <p>{item.type}</p>
                                <p>{srr[item.flag]}</p>
                            </li>
                        }):<div>暂无数据</div>
                    }
                </ol>
            </div>
        );
    }
}

let mapStateToProps=(state)=>{
    // console.log(state);
    return {
        list:state.newList
    }
}

let mapDispatchToProps=(dispatch)=>bindActionCreators(actions,dispatch)
 
export default connect(mapStateToProps,mapDispatchToProps)(coll);